<template>
  <div id="app">
    <router-view></router-view>
    <footer class="aui-bar aui-bar-tab">
        <div class="aui-bar-tab-item">
          <router-link to="/home">
                <i class="aui-iconfont aui-icon-home"></i>
                <div class="aui-bar-tab-label">首页</div>
          </router-link> 
        </div>
        <div class="aui-bar-tab-item">
             <router-link to="/shop">
                 <i class="aui-iconfont aui-icon-star"></i>
                 <div class="aui-bar-tab-label">商家</div>
              </router-link>
        </div>
        <div class="aui-bar-tab-item">
            <router-link to="/food">
                  <div class="aui-badge">99</div>
                  <i class="aui-iconfont aui-icon-cart"></i>
                  <div class="aui-bar-tab-label">推荐</div>
            </router-link>
        </div>
        <div class="aui-bar-tab-item">
            <router-link to="/wode">
                  <div class="aui-dot"></div>
                  <i class="aui-iconfont aui-icon-my"></i>
                  <div class="aui-bar-tab-label">我的</div>
            </router-link>
        </div>
    </footer>
  </div>
</template>
<script>
export default {
  name: 'app',
  created(){

  },
  watch: {
    '$route' (to, from) {
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      //this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
      console.log(to.path);
      console.log(from.path);
    }
  },
}
</script>
<style scoped>
 @import '/static/css/aui.css';
 @import '/static/css/aui-flex.css';
 @import '/static/css/style.css';
</style>
